<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css"></link>
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<style>
			body {
		        background: #eee;
		        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		        font-size: 14px;
		        color:#000;
		        margin: 0;
		        padding: 0;
		    }
		    .swiper-container {
		        width: 100%;
		        height: 224px;
		        margin: 20px auto;
		    }
		    .swiper-slide {
		        text-align: center;
		        font-size: 18px;
		        /* Center slide text vertically */
		        display: -webkit-box;
		        display: -ms-flexbox;
		        display: -webkit-flex;
		        display: flex;
		        -webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;
		    }
			.navbar-default{
				border: 0px;
			}
			.piclun {
				width: 200%;padding-left: 0px;
			}
			.piclun li{
				display: inline-block;;
			}
			.piclun li img{
				float: left;
			}
			a{color: #FFF;}
			a:focus, a:hover{color: #888888;text-decoration: none;}
		</style>
	</head>
	<body>
		<div style="background-color: #25292c;">
			
			<div class="navbar navbar-inverse" style="margin-bottom: 0px">
				<div class="container-fluid" style="color: #FFFFFF;">
					<!--<ul class="nav navbar-nav">
						<li class="col-md-1 col-md-offset-4"></li>
						<li><a href="#" style="color: #FFFFFF;">智能家居</a></li>
						<li><a href="#" style="color: #FFFFFF;">APP下载</a></li>
						<li><a href="#" style="color: #FFFFFF;">关于我们</a></li>
					</ul>-->
					<div class="row" style="margin: 15px 0px;">
						<div class="col-sm-1 col-sm-offset-3">
							<a href="index.html">
								<img src="images/logo.png" style="width: 15px;" />
							</a>
						</div>
						<div class="col-sm-2">
							<a href="allIndex.html">智能家居</a>
						</div>
						<div class="col-sm-2">
							<a href="downLoad.html">APP下载</a>
						</div>
						<div class="col-sm-2">
							<a href="aboutUs.html">关于我们</a>
						</div>
					</div>
				</div>
			</div>
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="images/C5AD.tm.png" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/BEEB.tm.png" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="images/C5AD.tm.png" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			  </div>
			
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			<!--<ul id="picUl" class="piclun">
				<li class="lunbo">
					<img src="images/红外伴侣-1440-648_11.jpg" width="500px" />
				</li>
				<li class="lunbo">
					<img src="images/红外伴侣-1440-648_03.jpg" width="500px"/>
				</li>
				<li class="lunbo">
					<img src="images/红外伴侣-1440-648_03.jpg" width="500px"/>
				</li>
				<li class="lunbo">
					<img src="images/BEEB.tm.png" width="500px"/>
				</li>
			</ul>-->
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide" ><img src="images/红外伴侣-1440-648_11.jpg" width="500px" /></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide"><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide" ><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			        <div class="swiper-slide" ><img src="images/红外伴侣-1440-648_03.jpg" width="500px"/></div>
			    </div>
		    <!-- 如果需要分页器 -->
			</div>
			<div class="footer text-muted" style="margin-top: 50px;">
				<div class="container-fluid">
					<div class="row" style="margin: 7px 0px;color: #cecdcb;">
						<div class="col-sm-2 col-sm-offset-2">
							帮组中心
						</div>
						<div class="col-sm-2">
							服务中心
						</div>
						<div class="col-sm-2">
							线下门店
						</div>
						<div class="col-sm-2">
							了解我们
						</div>
						<div class="col-sm-2">
							关注我们
						</div>
					</div>
					<div class="row" style="margin: 7px 0px;">
						<div class="col-sm-2 col-sm-offset-2">
							账户管理
						</div>
						<div class="col-sm-2">
							售后政策
						</div>
						<div class="col-sm-2">
							线下会所
						</div>
						<div class="col-sm-2">
							了解我们
						</div>
						<div class="col-sm-2">
							新浪微博
						</div>
					</div>
					<div class="row" style="margin: 7px 0px;">
						<div class="col-sm-2 col-sm-offset-2">
							购物指南
						</div>
						<div class="col-sm-2">
							自助服务
						</div>
						<div class="col-sm-2">
							服务网点
						</div>
						<div class="col-sm-2">
							加入我们
						</div>
						<div class="col-sm-2">
							跨业联盟
						</div>
					</div>
					<div class="row" style="margin: 7px 0px;">
						<div class="col-sm-2 col-sm-offset-2">
							订单操作
						</div>
						<div class="col-sm-2">
							相关下载
						</div>
						<div class="col-sm-2">
							零售网点
						</div>
						<div class="col-sm-2">
							联系我们
						</div>
						<div class="col-sm-2">
							官方微博
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/swiper-3.3.1.min.js"></script>
<script>
/*window.onload=function(){
	var piclun=document.getElementsByClassName("piclun");
	var picUl=document.getElementById("picUl");
		var picPro=document.getElementsByClassName("lunbo");
		console.log(picPro.length*picPro[0].offsetWidth);
		picUl.style.width='4000px';
}*/
var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        autoplay: 5000,
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30
    });
	/*setInterval("myclick()",5000);
	function myclick(){
		var picUl=document.getElementById("picUl");
		var picPro=document.getElementsByClassName("lunbo");
		var docWidth=document.body.clientWidth;
		var n=(picPro.length*picPro[0].offsetWidth-docWidth)/picPro[0].offsetWidth;
		for(var i=1;i<=n;i++){
			if(i==n){
				picUl.style.marginLift="-"+picPro.length*picPro[0].offsetWidth-docWidth-picPro[0].offsetWidth*n+"px";				
			}else{
				picUl.style.marginLift="-"+i*picPro[0].offsetWidth+"px";
			}*/
			/*if(picUl.style.marginLift<=0){
				console.log("2");
			}else{
				console.log("3");
			}*/
		//}
		
		/*for(int i=0;i<picPro.length;i++){
			
		}*/
		/*console.log(piclun.offsetWidth);*/
	//}
</script>
	</body>
</html>
